<template>
  <NewCard>
      <div class="detail_main">
        <h2>
            <svg-icon icon-class="return_icon" class="returnIcon" @click="returnBtn"/>
            <b>{{typeTxt}}</b>
            <p ref="detailTitle">{{currentDetail.title}}</p>
            <svg-icon icon-class="more_icon" v-if="titleMoreShow" @click="titleMoreBtn" :class="titleMoreBtnTxt?'':'moreTxt'"/>
        </h2>
          <div class="detail_content" ref="detailContent">
              <div class="detail_source">
                  <ul v-if="listActive=='1'">
                      <li>发布部门：{{currentDetail.from}}</li>
                      <li>适用区域：{{currentDetail.scope}}</li>
                      <li>发布日期：{{currentDetail.publishTime}}</li>
                      <li>效力级别：{{currentRank}}</li>
                      <li>时效性：{{currentState}}</li>
                      <li>生效日期：{{currentDetail.effectiveTime}}</li>
                  </ul>
                  <p v-else>{{currentDetail.from}} · {{ currentDetail.publishTime ? currentDetail.publishTime.substring(0,10) : currentDetail.createTime.substring(0,10)}}</p>
              </div>

              <!-- 法条的备注显示 -->
              <p class="history-p" v-if="currentDetail.history">{{currentDetail.history}}</p>
              <!-- 法条的备注显示 end-->

              <!-- 1法条 2解答 3政策 4合同 -->
              <div class="detail_txt" v-if="listActive=='1'">
                  <p v-for="cd in currentDetail.info" :key="cd.id">
                       <b v-for="(con,index) in cd.content" :key="index">{{con}}</b>
                  </p>
              </div>

              <!-- 1法条 2解答 3政策 4合同 -->
              <div class="detail_txt" v-else-if="listActive=='2'">
                <div class="detail_reply" v-if="currentDetail.background">
                    <p>{{currentDetail.background}}</p>
                </div>
                <p v-for="an in currentDetail.answer" :key="an.id">
                    <b v-if="an.type == '1'">{{an.content}}</b>
                    <b v-else-if="an.type == '2'"><img :src="an.content" /></b>
                </p>
              </div>

              <!-- 1法条 2解答 3政策 4合同 -->
              <div class="detail_txt" v-if="listActive=='3'">
                <p v-for="cd in currentDetail.info" :key="cd.id">
                    <b v-if="cd.type == '1'">{{cd.content}}</b>
                    <b v-else-if="cd.type == '2'"><img :src="cd.content" /></b>
                </p>
              </div>

              <!-- 1法条 2解答 3政策 4合同 -->
              <div class="detail_txt" v-if="listActive=='4'"> 
                <p v-for="cd in currentDetail.info" :key="cd.id"  v-html="cd.replace(/\r/g,'</p><p>')" >
                    <!-- {{cd.content}} -->
                </p>
              </div>
              <div class="accessory">
                  <ul>
                    <li v-for="(file,index) in currentDetail.files" :key="index">
                        <a :href="file.url">
                            <span class="el-icon-document"> 附件：{{file.name}}</span>
                            <svg-icon icon-class="download"/>
                        </a>
                    </li>
                    <li v-for="(file, index) in fileList" :key="index">
                        <a :href="file.url">
                            <span class="el-icon-document"> {{ file.content }}</span>
                            <svg-icon icon-class="download" />
                        </a>
                    </li>
                  </ul>
              </div>
              <div class="detail_label">
                  <el-tag v-for="(label, index) in labelList" :key="index" @click="clickDetailLabel(label)">{{label}}</el-tag>
                  <el-button size="mini" class="label_more" @click="labelMore" v-if="moreState" v-show="morehypo">
                    更多<i class="el-icon-caret-bottom"></i>
                  </el-button>
                  <el-button size="mini" class="label_more" @click="labelMorePack" v-else v-show="morehypo">
                    收起<i class="el-icon-caret-top"></i>
                  </el-button>
              </div>

              <!-- *以上回答仅供参考* -->
              <div class="forOnly" v-if="listActive == '2'">
                <el-divider>*以上回答仅供参考*</el-divider>
              </div>
          </div>
      </div>
      <div class="ribbon_content">
        <Ribbon :detail="currentDetail" :listActive="listActive" v-on="$listeners" :isFeat="isFeat"></Ribbon>
      </div>
  </NewCard>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import Ribbon from '@/components/Ribbon/ribbon.vue'
import debounce from 'lodash/debounce'
import { addDocHistoryApi } from "@/BMViews/api/doc/search.js";
import { getNowFormatDate } from "@/wss/utils/wss.js"
export default {
    name:'detailPage',
    components:{NewCard,Ribbon},
    props:['currentDetail','listActive'],
    data(){
        return{
            typeTxt:'',
            labelList:[],//文章标签的列表
            labelListNum:8,//文章默认一次添加的数量

            isFeat:true,//代表当前是推荐页点击进去的支付页面，传值给ribbon组件
            moreState:true,//标签更多按钮的显示状态(更多还是收起)
            morehypo:true,//当标签数量少于8个的时候隐藏

            startTime: "", // 进入页面的时间戳
            currentTime: "", //切走文章时的离开的时间戳
            startData:'',//进入页面的时间2022-09-01 00:00:00

            fileList: [],//附件列表
            titleMoreShow: false,//当前标题的行数
            titleMoreBtnTxt: true,//标题更多按钮 true更多 false收起
        }
    },
    mounted(){
        this.startTime = Date.now();//获取进入页面的时间戳
        this.startData = getNowFormatDate()//进入页面的时间2022-09-01 00:00:00
        
        this.countType();//进入页面判断当前文章的类型
        this.defaultLabel()// 默认获取8个标签
        
        //当没有标签的时候隐藏
        if(!this.currentDetail.labels){
            this.morehypo=false
        }else{
            //当标签数量少于8个的时候隐藏
            if(this.currentDetail.labels.length<8){
                this.morehypo=false
            }
        }

        //先显示更多按钮
        this.morehypo = true;
        //当标签数量少于8个的时候隐藏
        if (this.currentDetail.labels.length < 8) {
            this.morehypo = false;
        }
        
        // 过滤出政策的附件列表
        this.fileList = []
        if(this.currentDetail.info){
            // 政策和法条的
            this.fileList = this.currentDetail.info.filter(item=>{
                return item.type == "3"
            })
        }else{
            //解答的
            this.fileList = this.currentDetail.answer.filter(item=>{
                return item.type == "3"
            })
        }

        // 标题样式
        this.$nextTick(()=>{
            this.$refs.detailTitle.style['-webkit-line-clamp'] = 'inherit'
            this.titleMoreShow = this.$refs.detailTitle.clientHeight > 72
            if(this.titleMoreShow){
                this.titleMoreBtnTxt = true
                this.$refs.detailTitle.style['-webkit-line-clamp'] = 3
                this.$refs.detailTitle.style['font-weight'] = 'bold'
                let titleHeight = this.$refs.detailTitle.clientHeight + 38
                this.$refs.detailContent.style['height'] = `calc(100% - ${titleHeight}px)`
            }
        })
    },
    methods:{
        // 点击返回按钮
        returnBtn(){
            this.$bus.$emit('featHandlerShow',1)
        },

        // 点击标题更多按钮
        titleMoreBtn(){
            if(this.titleMoreBtnTxt){
                this.titleMoreBtnTxt = false
                this.$refs.detailTitle.style['-webkit-line-clamp'] = 'inherit'
                this.$refs.detailTitle.style['font-weight'] = '400'
                let titleHeight = this.$refs.detailTitle.clientHeight + 38
                this.$refs.detailContent.style['height'] = `calc(100% - ${titleHeight}px)`
            }else{
                this.titleMoreBtnTxt = true
                this.$refs.detailTitle.style['-webkit-line-clamp'] = 3
                this.$refs.detailTitle.style['font-weight'] = 'bold'
                let titleHeight = this.$refs.detailTitle.clientHeight + 38
                this.$refs.detailContent.style['height'] = `calc(100% - ${titleHeight}px)`
            }
        },

        //默认获取8个标签
        defaultLabel(){
            this.labelListNum=8
            this.$nextTick(()=>{
                if(this.currentDetail.labels){
                    this.labelList=this.currentDetail.labels.slice(0,this.labelListNum)
                }
            })
        },
        //根据listActive判断当前点击的是什么类型的文章
        // 1法条 2解答 3政策 4合同
        countType(){
            if(this.listActive=='1'){
                this.typeTxt = "法条"
            }else if(this.listActive=='2'){
                this.typeTxt = "解答"
            }else if(this.listActive=='3'){
                this.typeTxt = "政策"
            }else{
                this.typeTxt = "合同"
            }
        },
        //点击标签的更多按钮展示更多标签
        labelMore(){
            this.labelListNum = this.labelListNum + 8
            this.labelList=this.currentDetail.labels.slice(0,this.labelListNum)
        },
        //点击标签的收起按钮
        labelMorePack(){
            this.labelList=this.currentDetail.labels.slice(0,8)
            this.moreState=true
        },
        //点击内容页标签的时候 去搜索
        // clickDetailLabel(label){
        //     //判断关键词列表当中没有这个关键词的时候才去发请求
        //     this.$bus.$emit('detailLabel',label)
        // },
        //点击内容页标签的时候 去搜索  //防抖
        clickDetailLabel: debounce(function(label) {
            const path = this.$route.path;
            if (path.startsWith("/Bm-search")) {  
                // 当前在搜索页，直接搜索 
                this.$bus.$emit('detailLabel',label)
            }else{
                // 当前不在搜索页，跳转到搜索页，然后再搜索
                this.$router.push({path:'/Bm-search/searchAnswer',query:{label}})
            }
        }, 200),

        // 计算在文章内停留的时间
        async getArticleTime() {
            this.currentTime = Date.now();//切走文章时的时间
            //stayTime在此文章停留的时间
            let stayTime = this.currentTime - this.startTime;
            let data ={
                esId: this.currentDetail.id,
                esType: this.currentDetail.esType || this.listActive,
                nickname: this.$store.state.user.userInfo.nickName,
                startTime: this.startData,
                stayTime: stayTime/1000,
                title: this.currentDetail.title || this.currentDetail.name,
                userId: this.$store.state.user.userId,
            }
            await this.addDocHistory(data)
            //再次获取进入文章的时间
            this.startTime = Date.now();
        },
        // 添加浏览记录
        async addDocHistory(data){
            let result = await addDocHistoryApi(data)
            if(result.code != 200) return
        },
    },
    watch:{
        //监听currentDetail的变化去改变当前类型
        currentDetail(newValue, oldValue){
            this.getArticleTime()// 计算在文章内停留的时间

            this.countType()
            //文章数据发生变化后滚动条到顶部
            // this.$refs.detailContent.scrollTo(0, 0)
            //先显示更多按钮
            this.morehypo=true
            
            // 过滤出政策的附件列表
            this.fileList = []
            if(this.currentDetail.info){
                // 政策和法条的
                this.fileList = this.currentDetail.info.filter(item=>{
                    return item.type == "3"
                })
            }else{
                //解答的
                this.fileList = this.currentDetail.answer.filter(item=>{
                    return item.type == "3"
                })
            }

            // 标题样式
            this.$nextTick(()=>{
                this.$refs.detailTitle.style['-webkit-line-clamp'] = 'inherit'
                this.titleMoreShow = this.$refs.detailTitle.clientHeight > 72
                if(this.titleMoreShow){
                    this.titleMoreBtnTxt = true
                    this.$refs.detailTitle.style['-webkit-line-clamp'] = 3
                    this.$refs.detailTitle.style['font-weight'] = 'bold'
                    let titleHeight = this.$refs.detailTitle.clientHeight + 38
                    this.$refs.detailContent.style['height'] = `calc(100% - ${titleHeight}px)`
                }
            })
        },
        //监听点击标签更多 当标签全部展示完了之后要显示收起 点击收起只展示8个
        labelListNum(newValue, oldValue){
            // console.log(newValue,this.currentDetail.labels.length);
            if(newValue > this.currentDetail.labels.length){
                this.moreState=false
            }else{
                this.moreState=true
            }
        }
    },
    computed:{
        // 计算法律的效力级别：1法律 2宪法 3司法解释 4行政法规 5监察法规 6决定 7地方性法规 8地方规章 9部门规章 10规范性文件 11 行业规范 12行业标准
        currentRank(){
            switch(this.currentDetail.type){
                case '1':
                    return '法律';
                case '2':
                    return '宪法';
                case '3':
                    return '司法解释';
                case '4':
                    return '行政法规';
                case '5':
                    return '监察法规';
                case '6':
                    return '决定';
                case '7':
                    return '地方性法规';
                case '8':
                    return '地方规章';
                case '9':
                    return '部门规章';
                case '10':
                    return '规范性文件';
                case '11':
                    return '行业规范';
                case '12':
                    return '行业标准';
            }
        },
        // 法条生效状态 1 有效 2 失效 3 未生效 5 修改 9 已废止
        currentState(){
            switch(this.currentDetail.effectiveStatus){
                case 1:
                    return '现行有效';
                case 2:
                    return '已失效';
                case 3:
                    return '未生效';
                case 5:
                    return '修改';
                case 9:
                    return '已废止';
            }
        },
    },
}
</script>

<style scoped>
::v-deep .el-card__body > .top{
    display: none;
}
::v-deep .el-card__body>div{
    height: 100%!important;
    overflow-y: inherit!important;
    position: relative;
    margin-top: 5px;
}

/* 标题 */
.detail_main {
  height: 100%;
  overflow-y: auto;
  overflow-x: initial;
}
.detail_main::-webkit-scrollbar{
  width: 0;
}
.detail_main h2{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    border-bottom: 1px solid #EFEFEF;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.detail_main h2>b{
    display: block;
    width: 60px;
    height: 24px;
    background-color: #747474;
    color: #fff;
    font-size: 14px;
    text-align: center;
    font-weight: 400;
    line-height: 24px;
    border-radius: 15px;
    margin-right: 2%;
}
.detail_main h2>p{
    width: calc(100% - 105px);
    margin: 0;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* -webkit-line-clamp: 3; */
    overflow: hidden;
}
.detail_main h2 svg{
  margin: 0 auto;
  color: #f87a23;
  padding-bottom: 0;
  cursor: pointer;
  transition: all 0.3s;
}
.detail_main h2 svg.moreTxt{
    transform:rotate(180deg);
}

.detail_main h2 svg.returnIcon{
    margin: 0;
    margin-right: 5px;
}

/* 内容区 */
.detail_content{
    height: 86%;
    overflow-y: auto;
    overflow-x: initial;
}
.detail_content::-webkit-scrollbar{
  width: 0;
}
/* 来源 */
.detail_source>p{
    font-size: 12px;
    color: #999;
}
.detail_source ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    padding: 10px 20px;
    margin: 0;
    background: #F4F5F8;
    border-radius: 8px;
    color: #656669;
    font-size: 12px;
}
.detail_source ul>li{
    width: 28%;
    line-height: 24px;
}
.detail_source ul>li:nth-child(1){
    width: 44%;
}
.detail_source ul>li:nth-child(4){
    width: 44%;
}

/* 备注 */
.history-p{
  font-size: 14px;
  line-height: 26px;
  color: #333;
}

.detail_txt{
    font-size: 14px;
    line-height: 26px;
    color: #333;
}
.detail_txt p>b{
    display: block;
    font-weight: 400;
    /* text-indent: 2em; */
    line-height: 28px;
}
.detail_txt p>b img{
    width: 100%;
}
.detail_txt p>b:first-child{
    display: inline;
    margin-right: 10px;
}
.detail_txt p>b:nth-child(2){
    display: inline;
    text-indent:0;
}

.detail_reply{
    background-color: #f6f7fa;
    border-radius: 8px;
    padding: 10px 16px;
    color: #768097;
    margin: 15px 0;
}
.detail_reply p{
    margin: 0;
}

/* 附件 */
.accessory{
    margin-top: 40px;
}
.accessory ul{
    padding: 0;
}
.accessory ul>li{
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #666;
    border: 1px solid #EFEFEF;
    border-radius: 8px;
}
.accessory ul>li>a{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.accessory ul>li svg{
    cursor: pointer;
    font-size: 16px;
}


/* 标签 */
.detail_label{
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
    margin-bottom: 50px;
}
.detail_label .el-tag{
    width: 11%;
    color: #999;
    padding: 0;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 15px;
    line-height: 26px;
    background-color: #fff;
    margin-right: 1.71%;
    margin-bottom: 10px;
    cursor: pointer;
    overflow:hidden; 
    text-overflow:ellipsis;
    white-space:nowrap; 
}
.detail_label .el-tag:nth-child(8n){
    margin-right: 0;
}
.label_more{
    display: block;
    background-color: transparent;
    border: 0;
    margin: 0 auto;
    color: #b9b9b9;
    flex-basis: 100%;
}

/* 仅供参考 */
.forOnly{
  margin-bottom: 50px;
}
.forOnly >>> .el-divider__text{
  color: #666;
  font-size: 14px;
}


/* 功能区 */
.ribbon_content{
    position: absolute;
    left: -30px;
    bottom: 0px;
    width: calc(100% + 60px);
    background-color: #fff;
    border-top: 1px solid #ECEDF0;
    padding: 0 30px;
}

@media (max-width: 1120px) {
    .detail_main h2>b{
        /* width: 14%; */
    }
    .detail_main h2>p{
        /* width: 84%; */
    }

    .detail_source ul > li{
        width: 40%!important;
    }
    .detail_source ul > li:nth-child(odd){
        width: 60%!important;
    }
}
</style>